<template>
	<view class="container">
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="page-title">热门解梦</text>
		</view>
		
		<!-- 热门梦境 -->
		<view class="hot-dreams">
			<text class="section-title">大家都在解</text>
			<view class="dream-list">
				<view class="dream-item" 
					v-for="(dream, index) in hotDreams" 
					:key="index"
					@click="viewDream(dream)">
					<view class="dream-info">
						<text class="dream-tag" :style="{ background: dream.tagColor }">{{dream.tag}}</text>
						<text class="dream-title">{{dream.title}}</text>
					</view>
					<text class="dream-count">{{dream.count}}次</text>
				</view>
			</view>
		</view>
		
		<!-- 热门标签 -->
		<view class="tags-section">
			<text class="section-title">热门标签</text>
			<view class="tags-container">
				<text class="dream-tag" 
					v-for="(tag, index) in hotTags" 
					:key="index"
					@click="searchByTag(tag)">
					{{tag}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/utils/request.js'

export default {
	data() {
		return {
			hotDreams: [],
			hotTags: [],
			loading: false
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		viewDream(dream) {
			uni.navigateTo({
				url: `/pages/result/result?content=${encodeURIComponent(dream.content)}&id=${dream.id}`,
				success: () => {
					const eventChannel = this.getOpenerEventChannel()
					eventChannel.emit('dreamData', {
						content: dream.content,
						interpretation: dream.interpretation
					})
				}
			})
		},
		searchByTag(tag) {
			uni.navigateTo({
				url: `/pages/result/result?content=${encodeURIComponent(tag)}`
			})
		},
		async loadData() {
			this.loading = true
			try {
				// 并行请求热门梦境和热门标签
				const [hotDreamsRes, hotTagsRes] = await Promise.all([
					api.hot.getHotDreams(),
					api.hot.getHotTags()
				])
				
				this.hotDreams = hotDreamsRes.data
				this.hotTags = hotTagsRes.data
			} catch (error) {
				console.error('加载数据失败：', error)
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		// 下拉刷新
		async onPullDownRefresh() {
			await this.loadData()
			uni.stopPullDownRefresh()
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 30rpx;
}

.header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.back-btn {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.back-icon {
	font-size: 40rpx;
	color: #333;
}

.page-title {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
}

.section-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 20rpx;
	display: block;
}

.hot-dreams {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.dream-list {
	display: flex;
	flex-direction: column;
}

.dream-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 2rpx solid #f5f5f5;
}

.dream-item:last-child {
	border-bottom: none;
}

.dream-info {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.dream-tag {
	padding: 4rpx 16rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	color: #4080ff;
}

.dream-title {
	font-size: 28rpx;
	color: #333;
}

.dream-count {
	font-size: 24rpx;
	color: #999;
}

.tags-section {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
}

.tags-container {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.dream-tag {
	padding: 12rpx 24rpx;
	background: #f0f6ff;
	color: #4080ff;
	border-radius: 30rpx;
	font-size: 26rpx;
}

/* 添加加载状态样式 */
.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx;
}

.loading-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
	animation: rotate 1s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style> 